/* eslint-disable react/jsx-pascal-case */
import React, { Component } from 'react'
import '../../componentStyle/layoutContent.css'
import MenuItem_container from '../../../../../containers/MenuItem_container'
import axios from "axios"
import store from '../../../../../redux/store'
import { Provider } from 'react-redux'

export default class BlogSider extends Component {
    constructor(props) {
        super(props);

        this.state = {
            menuData: [],
            isFixed: false,
            isClick: new Array(5).fill(false).fill(true, 0, 1),
            display: new Array(5).fill(true),
            currentType: 0
        }

        axios.get('/static/articleKindList.json').then(res => {
            const menuData = res.data.menuData;

            this.setState({
                menuData
            });
        })
    }

    componentWillMount() {
        window.addEventListener('scroll', function (e) {
            const scrollTop = document.documentElement.scrollTop;
            if (scrollTop > 60) {
                this.setState({
                    isFixed: true
                });
            } else {
                this.setState({
                    isFixed: false
                });
            }
        }.bind(this));
    }

    coverString = (subStr, str) => {
        const reg = eval("/" + subStr + "/ig");
        return reg.test(str);
    }

    // 目录栏模糊搜索
    handleChange = () => {
        const inputData = this.input.value;
        let { display } = this.state;
        this.state.menuData.map((item, index) => {
            if (inputData === "") {
                display[index] = true;
                return index;
            }

            if (this.coverString(inputData, item.title)) {
                display[index] = true;
            } else {
                display[index] = false;
            }
        })

        this.setState({
            display
        });
    }


    // 处理MenuItem中点击时产生的数据变量（isClick）
    handleItemData = (index) => {
        let isClick = new Array(5).fill(false);
        isClick[index] = true;

        this.setState({
            isClick,
            currentType: index
        });
    }

    // 更新前状态，包含最新props
    componentWillReceiveProps(nextProps) {
        const { typeIndex } = nextProps;
        if (typeof typeIndex === 'number') {
            // 避免重复调用
            if (typeIndex !== this.state.currentType) {
                this.handleItemData(typeIndex)
            }
        }
    }

    render() {
        return (
            <div style={{
                boxShadow: '3px 2px 8px rgb(51, 51, 51)',
                width: 260,
                float: 'left',
                position: 'fixed',
                top: (this.state.isFixed ? 20 : 80),
                transitionDuration: '.3s'
            }}>
                <div style={{
                    backgroundColor: '#66CCFF',
                    width: 260,
                    height: 50
                }}>
                    <input
                        type="text"
                        style={{
                            width: 214,
                            height: 30,
                            backgroundColor: '#66CCFF',
                            border: '1px solid #fff',
                            borderRadius: '15px',
                            marginTop: 10,
                            marginLeft: 22,
                            outline: 'none',
                            textIndent: 15,
                            color: '#fff'
                        }}
                        ref={(input) => this.input = input}
                        onChange={this.handleChange}
                    />
                </div>
                {
                    this.state.menuData.map((item, index) => {
                        return (
                            <Provider store={store} key={index}>
                                <MenuItem_container
                                    isClick={this.state.isClick}
                                    item={item}
                                    index={index}
                                    handleItemData={this.handleItemData}
                                    display={this.state.display}
                                />
                            </Provider>
                        )
                    })
                }
            </div>
        );
    }
}
